<template>
  <div class="info-component">
    <!-- 计数器组件 -->
    <div v-if="type === 'counter'" class="counter-component">
      <span v-if="props.prefix" class="prefix">{{ props.prefix }}</span>
      <span class="counter-value" :style="{ color: props.color || '#409EFF' }">
        {{ displayValue }}
      </span>
      <span v-if="props.suffix" class="suffix">{{ props.suffix }}</span>
    </div>

    <!-- 进度条组件 -->
    <div v-else-if="type === 'progress'" class="progress-component">
      <div v-if="props.showText" class="progress-text">
        {{ props.percentage }}%
      </div>
      <el-progress
        :percentage="props.percentage"
        :type="props.type"
        :stroke-width="props.strokeWidth"
        :show-text="false"
        :color="props.color"
        :track-color="props.trackColor"
      />
    </div>

    <!-- 统计数值组件 -->
    <div v-else-if="type === 'statistic'" class="statistic-component">
      <div class="statistic-title" :style="{ color: props.color }">
        {{ props.title }}
      </div>
      <div class="statistic-value" :style="{ color: props.color }">
        <span v-if="props.prefix" class="prefix">{{ props.prefix }}</span>
        {{ formatValue(props.value, props.precision) }}
        <span v-if="props.suffix" class="suffix">{{ props.suffix }}</span>
      </div>
    </div>

    <!-- 时钟组件 -->
    <div v-else-if="type === 'clock'" class="clock-component">
      <div class="time-display" :style="{ color: props.color, fontSize: props.fontSize }">
        {{ currentTime }}
      </div>
      <div v-if="props.showDate" class="date-display" :style="{ color: props.color }">
        {{ currentDate }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'

const props = defineProps({
  type: {
    type: String,
    required: true
  },
  props: {
    type: Object,
    default: () => ({})
  }
})

// 计数器相关
const displayValue = ref(0)
let counterInterval = null

// 时钟相关
const currentTime = ref('')
const currentDate = ref('')
let clockInterval = null

// 格式化数值
const formatValue = (value, precision = 0) => {
  if (typeof value === 'number') {
    return value.toFixed(precision)
  }
  return value
}

// 更新计数器显示
const updateCounter = () => {
  const target = props.props.value || 0
  const duration = props.props.duration || 2
  const step = target / (duration * 60) // 60fps
  
  if (displayValue.value < target) {
    displayValue.value = Math.min(displayValue.value + step, target)
  }
}

// 更新时钟显示
const updateClock = () => {
  const now = new Date()
  
  // 格式化时间
  const timeFormat = props.props.format || 'HH:mm:ss'
  currentTime.value = formatTime(now, timeFormat)
  
  // 格式化日期
  if (props.props.showDate) {
    const dateFormat = props.props.dateFormat || 'YYYY-MM-DD'
    currentDate.value = formatDate(now, dateFormat)
  }
}

// 时间格式化
const formatTime = (date, format) => {
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  const seconds = date.getSeconds().toString().padStart(2, '0')
  
  return format
    .replace('HH', hours)
    .replace('mm', minutes)
    .replace('ss', seconds)
}

// 日期格式化
const formatDate = (date, format) => {
  const year = date.getFullYear()
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  
  return format
    .replace('YYYY', year)
    .replace('MM', month)
    .replace('DD', day)
}

// 监听计数器值变化
watch(() => props.props.value, (newValue) => {
  if (props.type === 'counter') {
    displayValue.value = 0
    if (counterInterval) {
      clearInterval(counterInterval)
    }
    counterInterval = setInterval(updateCounter, 1000 / 60) // 60fps
  }
}, { immediate: true })

// 组件挂载
onMounted(() => {
  if (props.type === 'counter') {
    counterInterval = setInterval(updateCounter, 1000 / 60)
  } else if (props.type === 'clock') {
    updateClock()
    clockInterval = setInterval(updateClock, 1000)
  }
})

// 组件卸载
onUnmounted(() => {
  if (counterInterval) {
    clearInterval(counterInterval)
  }
  if (clockInterval) {
    clearInterval(clockInterval)
  }
})
</script>

<style scoped>
.info-component {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}

/* 计数器样式 */
.counter-component {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 24px;
  font-weight: bold;
}

.counter-value {
  font-size: 32px;
  font-weight: bold;
}

.prefix, .suffix {
  font-size: 16px;
  opacity: 0.8;
}

/* 进度条样式 */
.progress-component {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progress-text {
  text-align: center;
  font-size: 14px;
  color: #fff;
}

/* 统计数值样式 */
.statistic-component {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.statistic-title {
  font-size: 14px;
  opacity: 0.8;
}

.statistic-value {
  font-size: 32px;
  font-weight: bold;
}

/* 时钟样式 */
.clock-component {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time-display {
  font-size: 24px;
  font-weight: bold;
  font-family: 'Courier New', monospace;
}

.date-display {
  font-size: 14px;
  opacity: 0.8;
}
</style> 